<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // vue2响应式原理
        // 注意：
        // 1、vue2中监测不到对象属性的增加与删除 
        //#region 
        // let person = {
        //     name:'洪奇奇',
        //     age:18
        // }
        // let p = {}
        // Object.keys(person).forEach((key)=>{
        //     Object.defineProperty(p,key,{
        //         get(){
        //             console.log(`有人读取了对象中的${key}属性`);
        //             return person[key]
        //         },
        //         set(value){
        //             console.log(`有人修改了对象中的${key}属性,值为${value}`);
        //             person[key] = value
        //         }
        //     })
        // })
        //#endregion

        // vue3响应式原理
        // 注意：
        // 1、Proxy代理，拦截对象中任意属性的变化，包括：属性值的读写，增加，删除等
        // 2、Reflect反射，对被代理对象的属性操作，Reflect包含了许多Object方法
        //#region 
        let person = {
            name:'洪奇奇',
            age:18
        }
        let p = new Proxy(person,{
            // target:源对象，propName属性名，proxyTarget代理对象
            get(target,propName,proxyTarget){
                console.log(`有人读取了源对象中的属性${propName}`);
                return Reflect.get(target,propName)
            },
            // target:源对象，propName属性名，value值，proxyTarget代理对象
            // set方法能监听到属性值的 修改 与 增加
            set(target,propName,value,proxyTarget){
                console.log(`有人修改了源对象中的属性${propName}，值为${value}`);
                Reflect.set(target,propName,value)
            },
            deleteProperty(target,propName){
                console.log(`有人删除了源对象中的属性${propName}`);
                return Reflect.deleteProperty(target,propName)
            }
        })
        //#endregion
    </script>
</head>
<body>
    
</body>
</html>